<!--
 * @Descripttion: 
 * @version: 
 * @Author: sunye
 * @Date: 2025-04-01 00:29:19
 * @LastEditors: sunye
 * @LastEditTime: 2025-04-13 22:29:06
-->
<template>
  <div class="login-container flex items-center justify-center">
    <div class="w-150 h-140 bg-#fff color-#000 border-rd-4 my-shadow px-19 p-t-10 p-b-19 box-border">
      <div class="h-12.5 text-align-center flex items-center justify-center font-size-8 color-#4D8BFF">
        <div class="i-carbon-sun text-3xl c-yellow p-r-3" />
        Smart Dash
      </div>
      <el-form ref="ruleFormRef" :model="form" label-width="120px" label-position="top" class="m-t-6" :rules="rules">
        <el-form-item label="Username" prop="username">
          <el-input class="h-12.5 w-112.5 ml-0" v-model="form.username" placeholder="Please input username" />
        </el-form-item>
        <el-form-item label="Password" class="m-t-6" prop="password">
          <el-input class="h-12.5 w-112 ml-0" v-model="form.password" show-password
            placeholder="Please input password" />
        </el-form-item>
        <div class="m-t-4 color-#666 cursor-pointer font-size-14px">
          Forgot password?
        </div>
        <el-form-item class="m-b-2.5">
          <div class="m-t-10">
            <el-button class="h-12.5 w-112.5 border-rd-1.25 bg-#4D8BFF! font-size-4" type="primary" :loading="loading"
              @click="onSubmit(ruleFormRef)">
              Sign In
            </el-button>
          </div>
        </el-form-item>
        <div class="m-t-0 font-size-3.5">
          <span class="color-#818486 inline-block">Don't have an account?</span>
          <span class="color-#4D8BFF p-l-2.5 inline-block cursor-pointer">
            Sign up
            <span class="i-carbon-lightning text-3xl c-red p-r-3"></span>
          </span>
        </div>
      </el-form>
    </div>
  </div>
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue'
import { useUserStore } from '@/store/user'
import type { FormInstance, FormRules } from 'element-plus'
import { useRouter, useRoute } from 'vue-router'
const $router = useRouter()
const $route = useRoute()
const loading = ref(false)
const ruleFormRef = ref<FormInstance>()
interface RuleForm {
  username: string
  password: string
}

const rules = reactive<FormRules<RuleForm>>({
  username: [
    { required: true, message: 'Please input  username', trigger: 'blur' },
    { min: 3, max: 10, message: 'Length should be 3 to 10', trigger: 'blur' },
  ],
  password: [
    { required: true, message: 'Please input password', trigger: 'blur' },
    { min: 4, max: 16, message: 'Length should be 4 to 16', trigger: 'blur' },
  ],
})
let form = reactive({
  username: 'mona',
  password: '111111',
})

let userStore = useUserStore()

// 登录
const onSubmit = async (formEl: FormInstance | undefined) => {
  loading.value = true
  if (!formEl) {
    loading.value = false
    return
  }
  await formEl.validate((valid, fields) => {
    if (valid) {
      console.log('submit!')
      userStore.token = 'isLogin'
      userStore.username = form.username
      userStore.password = form.password
      if ($route.query && $route.query.redirect) {
        $router.replace({ path: $route.query.redirect as string })
      } else {
        $router.replace({ path: '/home' })
      }
      loading.value = false
    } else {
      console.log('error submit!', fields)
      loading.value = false
    }
  })
}
</script>
<style scoped lang="less">
.login-container {
  width: 100vw;
  height: 100vh;
  background-image: url('@/assets/images/bcground.jpg');
  box-sizing: border-box;

  .my-shadow {
    box-shadow: 0 0 16px rgba(0, 0, 0, 0.2);
  }

  :deep(.el-form-item__label) {
    font-size: 16px;
  }
}
</style>
